سایت ها به دو دسته تقسیم میشوند:

  • استاتیک: سایت هایی که فقط اطلاعاتی را به کاربر نمایش میدهند
  • داینامیک: سایت هایی که علاوه بر اینکه اطلاعاتی به کاربر نشان میدهند با کاربر در تعامل هم هستند یعنی اطلاعاتی از کاربر میگرند و پردازش میکنند.

برای گرفتن اطلاعات از کاربر از فرم ها استفاده میکنیم.یک فرم توسط <FORM> باز و بسته میشود.در فرم المان هایی قرار میدهیم که انواع مختلفی دارند و هرکدام برای کاری مناسب هستند که بیشتر توضیح میدهیم

انواعتوضیحات
<input type="text">        یک ورودی تک خطه که از کاربر در یک سطر اطلاعات میگیرد
<input type="radio">       یک سری دکمه رادیویی که بین چند گزینه یک انتخاب را از کاربر میگیرد
 <input type="checkbox">     دکمه تیک دار که میتواند درست یا غلط باشد
  <input type="submit">      دکمه ای برای ارسال اطلاعات سرور سمت سرور
<input type="button">      فقط یک دکمه ساده که در اینجا کارایی ندارد ولی در آینده میتوانیم توسط مثلا JQUERY یا JAVASCRIPT آنها را فعال کنیم

 

Text Fields

در این نوع تگ در فرم ها میتوانیم یک سطر از کاراکترها را از کاربر دریافت کنیم.اگر به جای type="text" نوع عددید یعنی type="number"   بگذاریم فیلد ما فقط عدد قبول میکند. 

از تگ label هم برای توضیحات در مکان های مختلف در html استفاده کنیم با اجرای مثال زیر بیشتر با این موضوع آشنا میشوید.

از دکمه با نوع submit هم برای ارسال اطلاعات بعد از زدن دکمه به سمت سرور استفاده میشود که در آینده بیشتر توضیح داده خواهد شد.

مثال گرفتن نام از کاربر

<form >
 <label for="fname">First name:</label><br>
 <input type="text"  name="fname" ><br>
 
 <input type="submit" value="save">
</form>

 

Radio Buttons

در این نوع کاربر میتواند بین چند انتخاب فقط یکی را انتخاب کند.

مثال زیر را امتحان کنید


<p>Choose your favorite Web language:</p>

<form>
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label>
</form>

 

Checkboxes

توسط ای نوع میتوانیم مشخص کنیم کاربر چیزی را انتخاب کند یا نکند که پس اگر چند تا باشد کابر میتواند بین چند مورد را انتخاب کند

مثال زیر را امتحان کنید

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

 

The Submit Button

این دکمه همانطور که گفته شد اطلاعات فرم را سمت سرور ارسال میکند

  <input type="submit" value="Submit">

 

تعیین Name برای <input>

زمانی که دکمه submit زده شود سمت سرور با برنامه نویسی نظیر php اطلاعات فرم دریافت میشود.اطلاعات هر فیلد توسط name مشخص میشود.به عنوان مثال کدملی در فرم زیر با  name="national_code" مشخص شده است که در سمت سرور از روی این نام اطلاعات گرفته و پردازش میشود به عنوان مثال داخل دیتابیس درج میشود.

<input type="text" name="national_code">

 از فرم ها به صورت عملی در آموزش php استفاده میکنیم.

 

تگ-های-formatting-و-comment-در-html (جلسه قبل)
شروع CSS و ادغام آن برای نمایش در HTML (جلسه بعد)

دوره های اخیر